
<div class="book-detail">
    @if (Model.Header != null)
    {
        <header class="book-header">
            @await DisplayAsync(Model.Header)
        </header>
    }

    @if (Model.Cover != null)
    {
        <header class="book-header">
            @await DisplayAsync(Model.Cover)
        </header>
    }

    @if (Model.Content != null)
    {
        @await DisplayAsync(Model.Content)    
    }
        
</div>

<style>
    .book-detail {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .book-header {
        margin-bottom: 25px;
        text-align: center;
    }
    
    .book-cover {
        text-align: center;
        margin-bottom: 25px;
    }
    
    .book-detail-content {
        margin-top: 30px;
    }
    
    .bookTitle {
        font-size: 2.2em;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .bookAuthor {
        font-size: 1.3em;
        color: #666;
        font-style: italic;
        text-align: center;
    }
    
    .bookCover img {
        max-width: 300px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    
    .bookDescription {
        margin-top: 30px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
        border-left: 5px solid #007bff;
    }
    
    .bookDescription h3 {
        color: #333;
        margin-bottom: 15px;
        font-size: 1.4em;
    }
    
    .bookDescription p {
        color: #666;
        line-height: 1.8;
        margin: 0;
        font-size: 1.1em;
    }
</style> 